import { createBrowserRouter, Navigate } from "react-router-dom";
import { lazy, Suspense } from "react";
import { Spin, Flex } from "antd";

const contentStyle = {
  padding: 50,
  background: "#fff",
  borderRadius: 20,
};
const content = <div style={contentStyle} />;
// 加载动画组件
const LoadingComponent = () => {
  return (
    <Flex
      align="center"
      justify="center"
      style={{ height: "100vh", width: "100vw" }}
      gap="middle"
    >
      <Spin size="large" tip="加载中">
        {content}
      </Spin>
    </Flex>
  );
};

// 路由懒加载
const Login = lazy(() => import("../pages/Login"));
const Home = lazy(() => import("../pages/Home"));

// 配置路由实例
const router = createBrowserRouter([
  {
    path: "/",
    element: <Navigate to="/login" replace />,
  },
  {
    path: "/login",
    element: (
      <Suspense fallback={<LoadingComponent />}>
        <Login />
      </Suspense>
    ),
  },
  {
    path: "/home",
    element: (
      <Suspense fallback={<LoadingComponent />}>
        <Home />
      </Suspense>
    ),
  },
]);

export default router;
